<template>
  <div id="container" ref="myChart" style="width: 600px; height: 400px;"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

// 定义图表的选项
const option: echarts.EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar',
      barWidth: '20',
      label: {
        show: true,
        position: 'top',
      },
      itemStyle: {
        color: '#800080'
      },
      z: 1
    },
    {
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: [20, 10],
      symbolOffset: [0, 6],
      symbolPosition: 'start',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      z: 1,
      itemStyle: {
        color: '#8f0f8f'
      }
    },
    {
      type: 'pictorialBar',
      symbol: 'diamond',
      symbolSize: [20, 20],
      symbolOffset: [0, -10],
      symbolPosition: 'end',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      itemStyle: {
        color: '#8f0f8f'
      },
      z: 2
    }
  ],
};

// 使用 ref 创建一个引用，用于存储图表实例
const myChart = ref<echarts.ECharts | null>(null);

// 在组件挂载后初始化图表
onMounted(() => {
  myChart.value = echarts.init(document.getElementById('container'));
  if (myChart.value) {
    myChart.value.setOption(option);
  }
});
</script>

<style scoped>
#container {
  border: 1px solid #ccc;
}
</style>
